<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">

<dom-module id="forest-layer-panel">
  <style>
    :host > paper-material {
      border-radius: 0 2px 2px 0;
    }

    :host > * {
      padding: 4px;
    }

    :host {
      display: none;
      width: 400px;
      height: 400px;
    }

    paper-slider {
      width: 100%;
    }

    paper-dropdown-menu {
      width: 100%;
    }

    .label-container {
      position: relative;
      display: flex;
      align-items: center;
    }

    .label-container label {
      position: absolute;
      color: var(--secondary-text-color);
      font-size: 11px;
      top: 12px;
    }

    .label-container.opacity {
      margin-top: 12px;
      margin-bottom: -6px;
    }

    .label-container.opacity label {
      top: 0;
    }

    .label-container.base-layer {
      margin-left: 12px;
    }

    paper-dropdown-menu.simple paper-item,
    paper-dropdown-menu.simple ::content input {
      text-transform: capitalize;
    }

    .bottom-options {
      display: flex;
    }

    paper-slider ::content #sliderContainer.paper-slider {
      margin-left: 0;
    }

    .data-layer paper-listbox {
      width: 300px;
    }

    .base-layer paper-listbox,
    .background paper-listbox {
      width: 140px;
    }
  </style>
  <template>
    <paper-material elevation="1" class="layout vertical" stretch>
      <div class="header layout horizontal center">
        <paper-icon-button icon="chevron-left" on-tap="close"></paper-icon-button>
        <div id="title">Layers</div>
      </div>

      <div class="content">
        <div class="label-container data-layer">
          <label>Data layer</label>
          <paper-dropdown-menu>
            <paper-listbox class="dropdown-content"
                           on-iron-select="handleDropdownSelect_"
                           selected="0">
              <template is="dom-repeat" items="{{forestLayerMetadataList_}}">
                <paper-item name="[[item.id]]">[[item.title]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </div>

        <div class="label-container opacity">
          <label>Opacity</label>
          <paper-slider min="0" max="100" value="100" immediate-value="{{rawOpacity_}}" editable>
          </paper-slider>
        </div>

        <div class="bottom-options">
          <div class="label-container background">
            <label>Background mask</label>
            <paper-dropdown-menu id="backgroundDropdown" class="simple">
              <paper-listbox class="dropdown-content"
                             selected="{{selectedBackgroundType_}}"
                             attr-for-selected="name">
                <template is="dom-repeat" items="{{backgroundTypeList_}}">
                  <paper-item name="[[item]]">[[item]]</paper-item>
                </template>
              </paper-listbox>
            </paper-dropdown-menu>
          </div>
          <div class="label-container base-layer">
            <label>Base layer</label>
            <paper-dropdown-menu class="simple">
              <paper-listbox class="dropdown-content"
                             selected="{{selectedBaseLayerId}}"
                             attr-for-selected="name">
                <template is="dom-repeat" items="{{baseLayerIdList_}}">
                  <paper-item name="[[item]]">[[item]]</paper-item>
                </template>
              </paper-listbox>
            </paper-dropdown-menu>
          </div>
        </div>
      </div>
    </paper-material>
  </template>
  <script src="forest-layer-panel.js"></script>
</dom-module>
